<template>
  <el-form :model="tables" :rules="phoneRules" ref="phoneRef">
    <el-form-item label="电话:" label-width="60px" prop="phone">
      <el-input v-model="tables.phone" placeholder="请输入电话号码"  clearable></el-input>
    </el-form-item>
    <el-form-item label="密码:" label-width="60px" prop="pwd">
      <el-input type="password" v-model="tables.pwd" placeholder="请输入登录密码" show-password></el-input>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { ElMessage } from 'element-plus';
import { ref,reactive } from 'vue'
import { defineExpose } from 'vue'

const tables = reactive({
  phone: '',
  pwd: ''
})

const phoneRules = {
  phone: [
    { required: true, message: '请输入手机号码!', trigger: 'blur' },
    {  pattern: '^[1][3,4,5,7,8][0-9]{9}$', message: '手机号码格式错误!长度为11位数字!', max: 11, trigger: 'blur' }
  ],
  pwd: [
    { required: true, message: '请输入登录密码!', trigger: 'blur' },
    { pattern: '^[a-zA-Z0-9]+$', min: 6, max: 18, message: '密码长度在6-18位之间，只能包含字母和数字!' }
  ]
}

const phoneRef = ref()
const loginHandler = () => {
  // 表单验证
  phoneRef.value.validate((valid) => {
    if (valid) {
      console.log('success','phone:',tables.phone, 'pwd:', tables.pwd);
    } else {
      ElMessage.error('登录失败，请检查输入是否正确!');
      console.log('error');
    }
  })
}

// 定义暴露出去的方法
defineExpose({
  loginHandler
})
</script>

<style>

</style>